<!DOCTYPE html>
<html>
	<head>
		<title>jQuery marquee plugin with CSS3 Support</title>
		<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
		<script src="//rawgithub.com/tobia/Pause/master/jquery.pause.js" type="text/javascript"></script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" type="text/javascript"></script>
		<!--<script src="//rawgithub.com/aamirafridi/jQuery.Marquee/master/jquery.marquee.min.js?v=3" type="text/javascript"></script>-->
		<script src="jquery.marquee.js?v=3" type="text/javascript"></script>
		<style type="text/css">
			body {
			  margin: 10px;
			  font-family: 'Lato', sans-serif;
			}
			small {
				font-size: 14px;
			}
			h1 {
				margin-bottom: 20px;
				padding-bottom: 10px;
				text-align: center;
			}

			h2 {
				border-bottom: 1px dotted #ccc;
				padding-bottom: 5px;
				margin-bottom: 10px;
			}

			.marquee,
			.marquee-with-options,
			.marquee-vert-before,
			.marquee-vert {
			  width: 300px;
			  overflow: hidden;
			  border:1px solid #ccc;
			}
		</style>
	</head>
	<body>

		<div style="position:absolute; top: 10px; right: 10px;">
			<a href="https://twitter.com/share" class="twitter-share-button" data-text="jQuery plugin to scroll the text like the old traditional marquee. " data-via="aamirafridi" data-size="large">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
		</div>

		<h1>jQuery Marquee with CSS3 Animations Support<br><small><a href="http://aamirafridi.com/jquery/jquery-marquee-plugin">back to blog post</a> | <a href="https://github.com/aamirafridi/jQuery.Marquee" target="github">plugin on github</a> | <a href="https://github.com/aamirafridi/jQuery.Marquee/archive/master.zip">download</a></small></h1>

		<h2>Events</h2>
		<ul>
			<li><b>beforeStarting:</b> Event will be fired on the element before animation starts.</li>
			<li><b>finished:</b> Event will be fired on the element after the animation finishes.</li>
			<li><b>pause:</b> Fire this event on the element when you want to pause the animation, for example when you click/hover a link.</li>
			<li><b>resume:</b> Fire this event on the element when you want to resume, the paused animation.</li>
		</ul>

		<h2>Options</h2>
		<ol>
        	<li><code>allowCss3Support</code> If you wish the plugin should animate always using jQuery animate method even if browser supporst CSS3 animations. Default is <code>true</code></li>
        	<li><code>css3easing</code> Works when <code>allowCss3Support</code> is set to <code>true</code> - for full list <a href="http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function" target="_blank">click here</a>. Default is <code>'linear'</code></li>
        	<li><code>easing</code> Requires <a href="http://gsgd.co.uk/sandbox/jquery/easing/" target="_blank">jQuery easing plugin</a>. Default is <code>'linear'</code>.</li>
        	<li><code>delayBeforeStart</code> Time in milliseconds before the marquee starts animating. Default is 1000</li>
        	<li><code>direction</code> Direction towards which the marquee will animate <code>'left' / 'right' / 'up' / 'down'</code>. Default is <code>'left'</code>. Todo: need to change this to ltr/rtl etc</li>
        	<li><code>duplicated:</code> Should the marquee be duplicated to show an effect of continues flow. Use this only with the text is shorter than the container. Default is <code>false</code></li>
        	<li><code>duration</code> Speed in milliseconds in which you want your text to travel with width of your main container. Default is 5000. This option is the old <code>speed</code> option which still works but duration is the more word.</li>
        	<li><code>gap</code> Gap in pixels between the tickers. Will work only when the <code>duplicated</code> option is set to <code>true</code>. Default is <code>20</code> <i>Note: 20 means 20px so need to use <code>'20px'</code> as the value.</i></li>
        	<li><code>pauseOnHover:</code> on hover pause the marquee. If browser supports CSS3 and <code>allowCss3Support</code> is set to <code>true</code> than it will be done using CSS3. Otherwise this will be done using jQuery plugin https://github.com/tobia/Pause. Default is <code>false</code></li>
        	<li><code>pauseOnCycle</code> on cycle pause the marquee for <code>delayBeforeStart</code> milliseconds.</li>
		</ol>

		<h2>Demos</h2>
		<div style="border:1px solid #ccc; padding: 10px; background: #eee;">
			<h3><strong>NEW!!!</strong> Now with CSS3 Support</h3>
			<p>Now the plugin with detect if browser supports CSS3 animations than it will animate the element using CSS3 which will perform much better than animating using jQuery.</p>
			<p>The <code>pauseOnHover</code> also works using CSS3. The plugin just prepares the setup and required CSS3 animation CSS.</p>
			<p>Due to some reasons if you want plugin to animate always using jQuery than you need to set <code>allowCss3Support</code> option to false. Also an extra option <code>css3easing</code> is added.</p>
			<h4>Example of same element being animated using CSS3 and jQuery</h4>
			
			<div style="float:left" class='marquee'>Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END.</div> 
			<= CSS3 animated (if your browser supports CSS3 animation. You can check this element in inspector.)
			<br style="clear:both">
			<div style="float:left" class='marquee' data-allowCss3Support=false>Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END.</div> 
			<= Animated using jQuery by having <code>allowCss3Support=false</code> as data attribute. Inspect the element and you will see <code>margin-left</code> option being changed using jQuery.
		</div>

		<h3>Default options</h3>

		<div><strong>NOTE:</strong> Following 3 marquee has different length of text but the speed is same. Plugin will adjust the speed according to the length of your text. <i>(new feature)</i></div>

		<div class='marquee'>Less text here</div>
		<div class='marquee'>Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END.</div>
		<div class='marquee'>Very very long text lorem ipsum dolor sit amet, lorem ipsum dolor sit amet lorem ipsum dolor sit amet consectetur adipiscing elit END.</div>
		
		<h3>Options as data attributes</h3>
<pre>
&lt;div data-speed=&quot;2000&quot; data-direction=&quot;right&quot; class=&#39;marquee&#39;&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit END.&lt;/div&gt;
</pre>		
		<div data-speed="2000" data-direction="right" class='marquee'>Lorem ipsum dolor sit amet, consectetur adipiscing elit END.</div>
		
		<h3>Overwrite the default options with following</h3>
<pre>
$('.marquee-with-options').marquee({
	speed: 5000,
	gap: 50,
	delayBeforeStart: 0,
	direction: 'left',
	duplicated: true,
	pauseOnHover: true
});
</pre>
		<div class='marquee-with-options'>Lorem ipsum dolor sit amet, consectetur adipiscing elit END.</div>

		<a class='pause' href='#'>Pause the above animation</a> | <a class='resume' href='#'>Resume the paused animation</a> | <a class='toggle' href='#'>Pause on hover this link</a>
		<br/><br/>
		

		<h3>Direction vertical with default options</h3>
<pre>
$('.marquee-vert').marquee({
	direction: 'up',
	speed: 1500
});
</pre>
		<h4>Before (no height provided to the element)</h4>
		<div class='marquee-vert-before'>Nascetur suscipit distinctio optio commodi repudiandae aut exercitationem mauris. Blanditiis conubia hic dolorum! Vitae varius adipisci facilisis.</div>
		
		<h4>After</h4>
		<div class='marquee-vert'>Nascetur suscipit distinctio optio commodi repudiandae aut exercitationem mauris. Blanditiis conubia hic dolorum! Vitae varius adipisci facilisis.</div>

		<h3>With direction 'down' (using data attributes)</h3>	
		<div class='marquee-vert' data-delayBeforeStart=2000 data-direction='down' data-duplicated='true'>Nascetur suscipit distinctio optio commodi repudiandae aut exercitationem mauris. Blanditiis conubia hic dolorum! Vitae varius adipisci facilisis.</div>
		

		<h3>Direction vertical with duplicated option true (using data attributes) and height of 50px assigned using CSS</h3>
		<small style="font-style: italic">Inspect the following marquee to see data attributes and style attribute</small><br><br>

		<div class='marquee-vert' style='height:50px' data-gap=0 data-speed=3000 data-direction='up' data-duplicated='true'><b>Starts here</b> Nascetur suscipit distinctio optio commodi repudiandae aut exercitationem mauris. Blanditiis conubia hic dolorum! Vitae varius adipisci facilisis, laudantium ratione. Wisi! Quidem tortor, quisquam earum! Pretium necessitatibus.</div>
		
		<h3>With pauseOnHover and pauseOnCycle options</h3>	
		<div class='marquee-vert' data-direction='down' data-pauseOnHover='true' data-pauseOnCycle='true'>Nascetur suscipit distinctio optio commodi repudiandae aut exercitationem mauris. Blanditiis conubia hic dolorum! Vitae varius adipisci facilisis.</div>
		
<br><br>

<script>
$(function(){
	var $mwo = $('.marquee-with-options');
	$('.marquee').marquee();
	$('.marquee-with-options').marquee({
		//speed in milliseconds of the marquee
		speed: 5000,
		//gap in pixels between the tickers
		gap: 50,
		//gap in pixels between the tickers
		delayBeforeStart: 0,
		//'left' or 'right'
		direction: 'left',
		//true or false - should the marquee be duplicated to show an effect of continues flow
		duplicated: true,
		//on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause
		pauseOnHover: true
	});
	
	//Direction upward
	$('.marquee-vert').marquee({
		direction: 'up',
		speed: 1500
	});

	//pause and resume links
	$('.pause').click(function(e){
		e.preventDefault();
		$mwo.trigger('pause');
	});
	$('.resume').click(function(e){
		e.preventDefault();
		$mwo.trigger('resume');
	});
	//toggle
	$('.toggle').hover(function(e){
		$mwo.trigger('pause');
	},function(){
		$mwo.trigger('resume');
	})
	.click(function(e){
		e.preventDefault();
	})
});
</script>

</body>
</html>
